<template>
	<view>
		<web-view :webview-styles="webviewStyles" ref="webview" src="http://xjtujk2402.top/" @load="onWebViewLoad"></web-view>
	</view>
</template>

<script>
	export default {
		mounted() {
			console.log('Component mounted');
		},
		methods: {
			onWebViewLoad() {
				console.log('Webview loaded');
				this.fillFormInWebView();
			},
			fillFormInWebView() {
				const wv = this.$refs.webview;
				if (wv) {
					console.log('Webview is ready');
					wv.evalJs(`
						(function() {
							try {
								// Helper function to simulate keyboard input
								function simulateInput(element, value) {
									element.focus();
									value.split('').forEach(char => {
										var event = new KeyboardEvent('keydown', { key: char, bubbles: true });
										element.dispatchEvent(event);
										event = new InputEvent('input', { data: char, bubbles: true });
										element.dispatchEvent(event);
										event = new KeyboardEvent('keyup', { key: char, bubbles: true });
										element.dispatchEvent(event);
									});
								}

								// 找到用户名输入框并模拟输入
								var accountInput = document.getElementById('account');
								if (accountInput) {
									simulateInput(accountInput, 'your_username');
								} else {
									console.error('Account input element not found');
									return 'Account input element not found';
								}

								// 找到密码输入框并模拟输入
								var passwordInput = document.getElementById('password');
								if (passwordInput) {
									simulateInput(passwordInput, 'your_password');
								} else {
									console.error('Password input element not found');
									return 'Password input element not found';
								}

								// 模拟点击提交按钮
								var submitButton = document.getElementById('submitButton');
								if (submitButton) {
									submitButton.click();
								} else {
									console.error('Submit button element not found');
									return 'Submit button element not found';
								}

								console.log('Form filled and submitted successfully');
								return 'Form filled and submitted successfully';
							} catch (error) {
								console.error('Error filling form:', error);
								return 'Error filling form: ' + error.message;
							}
						})();
					`).then(result => {
						console.log('evalJs result:', result);
					}).catch(error => {
						console.error('Error executing evalJs:', error);
					});
				} else {
					console.error('Webview reference not found');
				}
			}
		},
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				}
			}
		}
	}
</script>

<style>

</style>